<template>
  <div class="margin-top-20">
    <el-form ref="form" :model="form" label-width="160px">
      <el-form-item label="小程序APPID">
        <el-input v-model="form['appId']"/>
      </el-form-item>
      <el-form-item label="小程序secret">
        <el-input v-model="form['appSecret']"/>
      </el-form-item>
      <el-form-item label="腾讯地图Key">
        <el-input v-model="form['TCMapKey']"/>
      </el-form-item>
      <el-form-item label="微信支付商户号">
        <el-input v-model="form['payMch']"/>
      </el-form-item>
      <el-form-item label="微信支付api密匙">
        <el-input v-model="form['paySecret']"/>
      </el-form-item>
      <el-form-item label="证书">
        <el-input v-model="form['certPem']" rows="6" type="textarea"/>
      </el-form-item>
      <el-form-item label="key证书">
        <el-input v-model="form['keyPem']" rows="6" type="textarea"/>
      </el-form-item>
      <el-form-item label="小程序上传密钥">
        <el-input v-model="form['wxMiniUploadKey']" :rows="4" type="textarea"/>
        <el-alert :closable="false" :title="`请将IP（${form['wxUploadIp']}）添加到微信公众平台后台“开发-开发设置-小程序代码上传”中；`" type="info"/>
      </el-form-item>
      <div style="text-align: center;">
        <el-button type="primary" size="small" @click="onSubmit">保 存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'CustomerServiceTelephone',
    data() {
      return {
        form: {
          // appId
          appId: '',
          // 密钥
          appSecret: '',
          // 腾讯地图key
          TCMapKey: '',
          // 商户号
          payMch: '',
          // 商户支付密钥
          paySecret: '',
          // 证书
          certPem: '',
          // key证书
          keyPem: '',
          // 小程序上传密钥
          wxMiniUploadKey: '',
          // 上传ip
          wxUploadIp: ''
        }
      }
    },
    methods: {
      // 加载数据
      loadData(){
        (async () => {
          const result = await this.$service.applicationGetWechatAppConfig();
          if (result.code === 0) {
            this.form = result.data || {};
          }
        })();
      },
      // 提交
      onSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            (async () => {
              const params = Object.assign({}, this.form);
              const result = await this.$service.applicationSaveWechatAppConfig(params);
              if (result.code === 0) {
                this.$message.success('操作成功~');
                this.loadData();
              } else {
                this.$message.error(result.msg);
              }
            })();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>
